<template>
  <guat-page-layout divide :title="[title, currentCheckingItemName ?? '名单']">
    <template #actions>
      <guat-button-group :buttons="pageButtons" />
    </template>
    <template #left>
      <div class="flex flex-col gap-4">
        <a-card :bordered="false">
          <guat-base-info-desc v-if="scenario == 'check'" size="large" :column="1" />
          <guat-base-info-form v-else layout="vertical" />
        </a-card>
        <a-card :bordered="false" :header-style="{ height: '52px' }">
          <template #title>
            <div class="text-xl">项目</div>
          </template>
          <template v-if="['create', 'edit'].includes(scenario)" #extra>
            <a-button type="outline" shape="round" @click="setModalVisible(true)">
              添加项目
            </a-button>
          </template>
          <div class="flex flex-col gap-4">
            <guat-point-change-item
              :item
              v-for="item in multipleChangeItems"
              @click="handleClickItem"
            />
          </div>
        </a-card>
      </div>
      <guat-add-item-modal title="添加项目" :validate-before-ok="validate" @ok="handleAddItem">
        <guat-add-item-form />
      </guat-add-item-modal>
    </template>
    <template #right>
      <guat-multiple-actions-table />
    </template>
  </guat-page-layout>
</template>

<script setup lang="tsx">
import { createMultipleActionsTableColumns } from "../table-config";
import { MultipleChangeItem, Scenario } from "../types";
import { addItemFormItemConfig, baseInfoFormItemConfig } from "../form-config";
import { ButtonType } from "@/components/GuatButtonGroup/types";
import { ButtonInternalStyle } from "@/config/internal-style";
import { baseInfoDesc } from "../desc-config";
import { multipleChangeItems as items } from "../data";
import { multipleChangeList } from "../data";

const router = useRouter();
const scenario = computed<Scenario>(() => {
  const isAdd = !router.currentRoute.value.params.id;
  const paths = router.currentRoute.value.path.split("/");
  if (isAdd) return paths[paths.length - 1] as Scenario;
  else return paths[paths.length - 2] as Scenario;
});
const title = computed(() => {
  switch (unref(scenario)) {
    case "check":
      return "查看批量修改";
    case "create":
      return "创建批量修改";
    case "edit":
      return "编辑批量修改";
  }
});
const currentCheckingItemName = ref();
const multipleChangeItems = ref<MultipleChangeItem[]>(items.items as any);
const [GuatMultipleActionsTable, { setTableData }] = useTable(
  createMultipleActionsTableColumns(scenario)
);
const [GuatBaseInfoForm] = useForm(baseInfoFormItemConfig);
const [GuatBaseInfoDesc, { setData }] = useDescriptions(baseInfoDesc);
const [GuatAddItemModal, { setModalVisible }] = useModal();
const [GuatAddItemForm, { getFormValue, validate }] =
  useForm<MultipleChangeItem>(addItemFormItemConfig);
const { info } = useModalNotice();
const { success } = useMessage();

const pageButtons = computed<any[]>(() => {
  const text = unref(computed(() => (unref(scenario) == "create" ? "创建" : "修改")));
  const buttons: ButtonType[] = [
    {
      text: unref(scenario) == "check" ? "返回" : "取消",
      internal: ButtonInternalStyle.PLO,
      onClick: () => router.back(),
    },
  ];
  if (unref(scenario) != "check")
    buttons.push(
      {
        text: "暂存",
        internal: ButtonInternalStyle.OLR,
        onClick: () =>
          info({
            title: "暂存确认",
            content: "请确认是否要暂存",
            onOk: () => success("暂存成功"),
          }),
      },
      {
        text: `确认${text}`,
        internal: ButtonInternalStyle.PLR,
        onClick: () =>
          info({
            title: `${text}确认`,
            content: `请确认是否要${text}`,
            onOk: () => success(`${text}成功`),
          }),
      }
    );
  return buttons;
});

const handleClickItem = () => {
  currentCheckingItemName.value = "奖励名单";
};

const handleAddItem = () => {
  const data = getFormValue();
  multipleChangeItems.value.push(data);
};

onMounted(() => {
  setData(multipleChangeList[0]);
  setTableData(items.itemMembers);
});
</script>

<style scoped></style>
